<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>HeatMap</title>
  <script src="lib.thies.js"></script>
  <script src="heatmap.js"></script>
  <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
</head>
<body>
  <div>
    <h3>Canvas</h3>
    <canvas id="canvasClock"></canvas>
    <p>Click canvas to create image.</p>
  </div>

  <div id="ImgContainer">
    <h3>Image</h3>
    <img src="" id="canvasCopyAsImage">
    <p>Click image to download.</p>
  </div>

</body>
</html>

<script type="text/javascript">


  var canvas = $('canvasClock');
  var container = $('ImgContainer');
  container.style.display = 'none';
  var img = $('canvasCopyAsImage');

  var getRandomInt = function(min, max)
  {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var myshema = [
    [0, 'rgba(0, 0, 0, 1)'],
    //[0, 'rgba(255, 255, 255, 1)'],
    //[0.05, '#35343d'],
    //[0.15, '#050555'],
    //[0.3, '#00eaf2'],
    //[0.45, '#00b441'],
    //[0.6, '#dcfc05'],
    //[0.2, 'rgba(200, 200, 200, 1)'],
    [0.8, 'rgba(0, 100, 0, 0.2)'],
    [0.9, 'rgba(0, 150, 0, 0.5)'],
    [1, 'rgba(0, 255, 0, 1)']
  ];

  var size = 50;
  var heatMap = new HeatMap(size, size, myshema);
  for (var i=0;i<=getRandomInt(10,50);i++) {
    heatMap.addPoint(getRandomInt(0,size), getRandomInt(0,size), 10);
  }
  //heatMap.colorSchema
  heatMap.create(canvas);

  var getCanvasData = function() {
    var dataURL = canvas.toDataURL('image/png');
    //console.log(dataURL);
    img.src = dataURL;
    container.style.display = 'block';
    //p.redraw();
    //p.exit();
  }

  var downloadImg = function() {
	  document.location.href = img.src.replace('image/png', 'image/octet-stream');
  }

  thies.addEventSimple(canvas,'click',getCanvasData);
  thies.addEventSimple(img,'click',downloadImg);

</script>